<template>
	<view class="my-wallet">
		<u-toast ref="uToast"></u-toast>
		
		<view class="top">
			<view class="box">
				<view class="flex-between" style="margin-bottom: 20rpx;">
					<view>您当前有</view>
					<view class="flex-align" @click="withdrawals">去提现<u-icon name="arrow-right" color="#fff"></u-icon></view>
				</view>
				<view class="flex-between">
					<view class="bold" style="font-size: 44rpx;">213钱包余额</view>
				</view>
			</view>
		</view>
		
		<u-cell-group>
			<u-cell
				v-for="item in list"
				:key="item.id"
			>
				<view slot="title">
					<view class="name">{{ item.name }}</view>
					<view class="rest">余额:{{ item.rest }}元</view>
				</view>
				<view slot="value" class="text-right">
					<view class="increate" v-if="item.increate">+{{ item.increate }}元</view>
					<view class="decreate" v-else-if="item.decreate">-{{ item.decreate }}元</view>
					<view class="date">{{ item.date }}</view>
				</view>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					name: '充值',
					date: '2020/12/12 12:12:12',
					increate: 50,
					rest: '5340'
				},
				{
					id: 2,
					name: '充值',
					date: '2020/12/12 12:12:12',
					decreate: 200,
					rest: '5340'
				}
			]
		}
	},
	methods: {
		withdrawals() {
			this.$refs.uToast.show({
				message: '敬请期待'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.my-wallet {
	.top {
		background-color: #f3f3f3;
		padding: 30rpx;
		
		.box {
			color: #fff;
			padding: 40rpx 30rpx;
			background-color: #ef7e36;
			border-radius: 20rpx;
		}
	}
	
	/deep/.u-cell-group {
		.name {
			color: #333;
			font-weight: bold;
		}
		
		.increate {
			color: #ff4000;
		}
		
		.decreate {
			color: #19b408;
		}
		
		.rest,
		.date {
			margin-top: 14rpx;
			font-size: 26rpx;
			color: #505050;
		}
	}
}
</style>
